import React, { Component } from 'react';
import BannerModel from '../../../../models/bannerModel'
import { Carousel } from 'antd';
import Style from './index.module.scss';

interface StateInterface {
  list: Array<BannerModel>
}

interface PropsInterface {
}

// tslint:disable-next-line
export class WebHomeBanner extends Component<PropsInterface, StateInterface> {

  state: Readonly<StateInterface> = {
    list: []
  }

  componentDidMount() {
    this.getAllModel()
  }

  getAllModel() {
    BannerModel.getModels().then((data: any) => {
      this.setState(() => {
        return {
          list: data
        }
      })
    }).catch((e: any) => { 
      console.log('e = ', e)
    })
  }

  render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {

    return (
      <Carousel className='w-content-box' effect="fade" autoplay>
        {
          this.state.list.map((item: BannerModel) => {
            return <div className={`${Style['banner-item']}`}
              key={item._id}>
                <div className={ `w-image-fit ${Style['img']}` } style={{ backgroundImage: `url(${item.pcHomeBannerUrl})` }}></div>
            </div>
          })
        }
      </Carousel>
    );
  }
}

export default WebHomeBanner
